<template>
  <div>
    <ul ref="ul">
      <li v-for="li in list" :key="li">{{li}}</li>
    </ul>
    <button @click="addItem">添加li，当前li长度{{num}}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      list: ['a']
    }
  },
  methods: {
    addItem() {
      this.list.push(Math.random())
      this.list.push(Math.random())
      this.list.push(Math.random())

      // // 此时获取的li长度是上一次渲染后的长度  1, 4, ...
      // const ul = this.$refs.ul
      // this.num = ul.childNodes.length

      // dom为异步渲染
      // 1. $nextTick是DOM渲染完成后的回调
      // 2. 页面渲染时会将data进行整合，多次data修改，DOM只会渲染一次
      this.$nextTick(() => {
        const ul = this.$refs.ul
        this.num = ul.childNodes.length
      })
    }
  }
}
</script>
